<template>
  <div>
    <div
      style="margin-bottom: 5px; display: flex; justify-content: space-between"
      v-if="showSearch"
    >
      <div>
        <el-input
          v-model="strfilter"
          placeholder="请输入品名"
          style="width: 200px"
          class="filter-item"
          size="small"
          clearable
          @keyup.enter.native="search(strfilter)"
        />
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          @click="search(strfilter)"
        >
          查询
        </el-button>
      </div>
      <div>
        <el-button-group>
          <el-button
            :type="!queryParams.accurate ? 'primary' : 'default'"
            @click="
              queryParams.accurate = false;
              getList();
            "
            >模糊</el-button
          >
          <el-button
            :type="queryParams.accurate ? 'primary' : 'default'"
            @click="
              queryParams.accurate = true;
              getList();
            "
            >精确</el-button
          >
        </el-button-group>
      </div>
    </div>
    <div>
      <el-table
        ref="selectVal"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :height="tableHeight"
        highlight-current-row
        style="overflow: auto"
        @row-click="rowClick"
        :row-class-name="rowIndex"
        :size="tableSize"
      >
        <template slot="empty">
          <el-empty description="暂无货品" :image-size="120"></el-empty>
        </template>
        <!-- ---复选列--- -->
        <el-table-column v-if="multi == 1" type="selection" width="40" />
        <!-- ---单选列--- -->
        <el-table-column v-else label="" width="40" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          label="品号"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.namenum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品名"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="型号"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.productType }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单位"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="销售价"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="面料状态"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.fabricType == '1'">素布</span>
            <span v-if="scope.row.fabricType == '2'">绣花</span>
          </template>
        </el-table-column>
        <el-table-column
          label="营销类别"
          align="center"
          min-width="50"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getQbGoodsList } from "@/api/goods/qb";
export default {
  components: {},

  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    // 初始化
    searchVal: {
      type: String,
      default: "",
    },
    orderType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    tableHeight: {
      type: String,
      default: "350px",
    },
    tableSize: {
      type: String,
      default: "medium",
    },
    multi: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      title: "墙布货品",
      list: [], //  列表数据
      strfilter: "", // 搜索框内输入的值
      total: 0,
      radio: "", // 单选用参数默认为0即可
      selrows: "", // 选择的内容 单选变量
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        accurate: false,
        name: null,
        typeNumber: null,
      },
    };
  },
  created() {},
  mounted() {
    // this.getList()
  },
  methods: {
    //  单选列方法
    getCurrentRow(row) {
      this.$forceUpdate();
      this.selrows = row;
      this.$emit("selRowVal", row);
    },
    // 加载列表
    getList() {
      if (this.orderType == "") {
        // null
      } else if (this.orderType == "SA") {
        this.queryParams.typeNumber = 1;
      } else {
        this.queryParams.typeNumber = -1;
      }
      var queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        data: {
          name: this.queryParams.name,
          typeNumber: this.queryParams.typeNumber,
          accurate: this.queryParams.accurate,
          namenum: null,
          fabricType: null,
          type: this.type ? this.type : null,
          isuse: 1,
          // isShow: 1,
        },
      };
      getQbGoodsList(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 查询
    search(res) {
      this.queryParams.name = res;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
</style>
